<template>
  <Portlet>
    <table class="order-table">
      <tr>
        <td align="center" style="padding-left: 5px; width: 180px">
          <img :src="'/api/ms-mongodb/file/download?fileId=' + biddingData.peoplePicture" style="width: 150px; height: 150px;"/>
        </td>
        <td width="30%">
          <div class="marginBottom8">
            {{biddingData.people}}
            <el-tooltip v-if="biddingData.isAuthention == 1" class="item" effect="dark" content="已通过实名认证" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/certification.png" alt="实名认证" title="已通过实名认证" />
            </el-tooltip>
            <el-tooltip v-if="biddingData.isAuthention !== 1" class="item" effect="dark" content="未实名认证" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/Unproven.png" alt="未实名认证" title="未实名认证"/>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="carContent" placement="top-start" style="margin-top: 5px">
              <img style="no-repeat: center; height: 14px; width: 20px" src="/static/images/faHuoBao/car.png" alt="车辆" :title="carContent" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="areaContent" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/warehouse.png" alt="仓库" :title="areaContent" />
            </el-tooltip>
          </div>
          <div class="marginBottom8">
            <span class="shiFuAddress">{{biddingData.nature}}</span><span v-if="biddingData.address"> | {{biddingData.address}} </span>
          </div>
          <div class="marginBottom8">
            <el-tooltip v-if="biddingData.favorTMJD == 1" class="item" effect="dark" content="支持汪师傅核销" placement="right">
              <img style="no-repeat: center; height: 22px; width: 46px" src="/static/images/faHuoBao/wangshifu.png" alt="汪师傅" title="支持汪师傅核销" />
            </el-tooltip>
            <el-tooltip v-if="biddingData.favorTMJD == 1" class="item" effect="dark" content="支持喵师傅核销" placement="right">
              <img style="no-repeat: center; height: 22px; width: 46px" src="/static/images/faHuoBao/miaoshifu.png" alt="喵师傅" title="支持喵师傅核销" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="服务承诺" placement="right">
              <img style="no-repeat: center; height: 22px; width: 61px" src="/static/images/faHuoBao/ServiceCommitment.png" alt="服务承诺" title="服务承诺"  @click="pledge(biddingData)"/>
            </el-tooltip>
          </div>
          <div class="marginBottom8">
            <span>好评率：{{fhbWorkerCount.applauseRate}}%</span><span style="margin-left: 20px;">总单数：{{fhbWorkerCount.finishNum}}</span><span style="margin-left: 20px;">投诉数：{{fhbWorkerCount.complainNum}}</span>
          </div>
        </td>
        <td width="25%" align="center">
          <div class="cell-center">
            <span style="font-size: 36px;" class="font-red">{{money}}</span> 元<br>
            <truncate :value="biddingData.memo" :maxLength="12"></truncate>
          </div>
        </td>
        <td width="25%" align="center">
          <div class="cell-center">
            <slot name="tools">&nbsp;</slot>
          </div>
        </td>
      </tr>
    </table>
    <modal-fees-detail ref="modalFeesDetail" :orderId="id"></modal-fees-detail>
  </Portlet>
</template>

<script>
import {dotData} from '@/utils'
import modalFeesDetail from '@/views/fhb/myOrders/components/modal/modalFeesDetail'
export default {
  name: 'service-header',
  props: {
    id: {
      type: String,
      required: true
    },
    orderId: {
      type: String,
      required: true
    },
    detail: {
      type: Object,
      required: true
    }
  },
  components: {
    modalFeesDetail
  },
  data() {
    return {
      biddingData: {}
    }
  },
  created() {
    if (this.id) {
      this.getBiddingData()
    }
  },
  computed: {
    money() {
      return dotData(this.biddingData, 'price') || 0
    },
    carContent() {
      if (this.biddingData.carsHold) {
        return '配送车辆：' + this.biddingData.cars + '辆'
      } else {
        return '配送车辆：0辆'
      }
    },
    areaNum() {
      return dotData(this.biddingData, 'area') || 0
    },
    areaContent() {
      return '仓库：' + this.areaNum + '㎡'
    },
    complainTime() {
      return parseInt((this.detail.evalueForComplainTime || this.detail.closeForComplainTime) / 1000) || 0
    },
    canComplaint() {
      return !!this.complainTime
    },
    fhbWorkerCount() {
      return dotData(this.biddingData, 'fhbWorkerCount') || {}
    }
  },
  methods: {
    // 报价师傅
    getBiddingData() {
      this.$ajax.get('/ms-terminal-order/bidding/bidded-order', {orderId: this.orderId}).then(response => {
        this.biddingData = response.data
      })
    },
    // 服务承诺
    pledge(data) {
      let BighomeServiceCommitment = dotData(data, 'fhbWorkerServiceCommitment') || {}
      let carrSubject = dotData(BighomeServiceCommitment, 'carrSubject') || ''
      let freeForCarry = dotData(BighomeServiceCommitment, 'freeForCarry') || ''
      let overmileSubject = dotData(BighomeServiceCommitment, 'overmileSubject') || ''
      let coastForOvermile = dotData(BighomeServiceCommitment, 'coastForOvermile') || ''
      let storageSubject = dotData(BighomeServiceCommitment, 'storageSubject') || ''
      let freeForStorage = dotData(BighomeServiceCommitment, 'freeForStorage') || ''
      let uniformSubject = dotData(BighomeServiceCommitment, 'uniformSubject') || ''
      let serviceOnUniform = dotData(BighomeServiceCommitment, 'serviceOnUniform') || ''
      let basicSubject = dotData(BighomeServiceCommitment, 'basicSubject') || ''
      let basicCommitment = dotData(BighomeServiceCommitment, 'basicCommitment') || ''
      let pledgeStr = `<p>1.` + carrSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + freeForCarry + `</p>
                       <p>2.` + overmileSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + coastForOvermile + `</p>
                       <p>3.` + storageSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + freeForStorage + `</p>
                       <p>4.` + uniformSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + serviceOnUniform + `</p>
                       <p>5.` + basicSubject + `</p>
                       <p>&nbsp;&nbsp;&nbsp;` + basicCommitment + `</p>`
      this.$alert(pledgeStr, '师傅服务承诺', {
        showConfirmButton: '关闭',
        dangerouslyUseHTMLString: true
      })
    },
    // 费用详情
    feesDetail() {
      this.$refs.modalFeesDetail.show()
    }
  }
}
</script>

<style scoped>

</style>
